<template>
  <div class="app-container">
    <div class="content-box">
      <h2>学生查询</h2>

      <!-- 查询框 -->
      <div class="search-bar">
        <input
          v-model="searchName"
          type="text"
          placeholder="请输入学生姓名（可模糊查询）"
        />
        <button @click="fetchStudents">查询</button>
        <button @click="showRegisterModal = true">学生注册</button>
      </div>

      <!-- 查询结果 -->
      <div v-if="students.length === 0">
        <p>没有找到学生信息</p>
      </div>
      <table v-else border="1" cellspacing="0" cellpadding="6">
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="stu in students" :key="stu.id">
            <td>{{ stu.id }}</td>
            <td>{{ stu.name }}</td>
            <td>{{ stu.gender }}</td>
            <td>{{ stu.age }}</td>
            <td>
              <button @click="viewDetails(stu)">显示详情</button>
              <button @click="editStudent(stu)">修改</button>
              <button @click="deleteStudent(stu)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 学生详情模态框 -->
      <StudentDetailModal
        :show="showModal"
        :student="selectedStudent"
        @close="showModal = false"
      />

      <!-- 学生注册模态框 -->
      <StudentRegisterModal
        :show="showRegisterModal"
        @close="showRegisterModal = false"
        @success="fetchStudents"
      />

      <!-- 学生修改模态框 -->
      <StudentEditModal
        :show="showEditModal"
        :student="selectedStudent"
        @close="showEditModal = false"
        @success="fetchStudents"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import StudentDetailModal from './components/StudentDetailModal.vue'
import StudentRegisterModal from './components/StudentRegisterModal.vue'
import StudentEditModal from './components/StudentEditModal.vue'

const searchName = ref('')
const students = ref([])
const selectedStudent = ref({})

// 模态框控制
const showModal = ref(false)
const showRegisterModal = ref(false)
const showEditModal = ref(false)

// 查询学生
const fetchStudents = async () => {
  try {
    const res = await axios.get('http://localhost:8080/student/findByName', {
      params: { name: searchName.value || '' }
    })
    students.value = res.data.code === 1 ? res.data.data : []
  } catch (err) {
    console.error(err)
    students.value = []
  }
}

// 查看详情
const viewDetails = (stu) => {
  selectedStudent.value = stu
  showModal.value = true
}

// 修改
const editStudent = (stu) => {
  selectedStudent.value = stu
  showEditModal.value = true
}

// 删除
const deleteStudent = async (stu) => {
  const confirmDelete = window.confirm(`确定要删除编号 ${stu.id} 的学生吗？`)
  if (!confirmDelete) return

  try {
    const res = await axios.delete(
      `http://localhost:8080/student/delete/${stu.id}`
    )
    if (res.data.code === 1) {
      alert(res.data.data)
      fetchStudents()
    } else {
      alert('删除失败: ' + res.data.msg)
    }
  } catch (err) {
    console.error(err)
    alert('删除出错')
  }
}

// 初始化加载
fetchStudents()
</script>

<style scoped>
/* 页面整体背景 */
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f2f4f5, #e9ecef); /* 低饱和灰蓝色系 */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #2f3542;
}

/* 内容容器 */
.content-box {
  background: #ffffff;
  padding: 30px 40px;
  border-radius: 0; /* 去掉圆角，棱角风格 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 95%;
  max-width: 1000px;
  text-align: center;
}

/* 标题 */
h2 {
  margin-bottom: 20px;
  color: #2f3542;
  font-size: 22px;
  font-weight: 600;
  border-bottom: 2px solid #dcdde1;
  padding-bottom: 8px;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
}

.search-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ced4da;
  border-radius: 0; /* 直角 */
  font-size: 14px;
  background-color: #f8f9fa;
  transition: border-color 0.2s, background-color 0.2s;
}
.search-bar input:focus {
  border-color: #6c757d;
  background-color: #ffffff;
  outline: none;
}

/* 按钮（低饱和色系） */
button {
  padding: 8px 16px;
  border: none;
  border-radius: 0; /* 棱角风格 */
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #ffffff;
}

/* 蓝色按钮：查询 */
button:nth-of-type(1) {
  background-color: #6c8ebf; /* 低饱和蓝 */
}
button:nth-of-type(1):hover {
  background-color: #5a769d;
}

/* 绿色按钮：注册 */
button:nth-of-type(2) {
  background-color: #7ba97a; /* 低饱和绿 */
}
button:nth-of-type(2):hover {
  background-color: #5e8a5d;
}

/* 红色按钮：删除 */
button:nth-of-type(3) {
  background-color: #b56565; /* 低饱和红 */
}
button:nth-of-type(3):hover {
  background-color: #944b4b;
}

/* 表格 */
table {
  margin: 0 auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid #dcdde1;
}

th, td {
  padding: 12px;
  text-align: center;
  border: 1px solid #dcdde1;
}

th {
  background-color: #f1f2f6;
  font-weight: 600;
  color: #2f3542;
}

tbody tr:nth-child(even) {
  background-color: #fafafa;
}
tbody tr:hover {
  background-color: #e9ecef;
  transition: background-color 0.2s;
}
</style>
